<template>
  <!-- 门诊医生-中医处方-单个中药 -->
  <div class="3xl:w-[12.5%] w-[20%] item-style" :class="focusKey === currentMedicine.key ? 'active' : ''">
    <a-button v-if="!isLast" type="text" danger :icon="h(CloseOutlined)" shape="circle" size="small" class="delete-btn" @click="onDelete(currentMedicine)" />
    <div class="flex">
      <SelectTable
        v-model:value="currentMedicine.mc"
        type="中药"
        class-name="border-b-style text-base"
        :bordered="false"
        placeholder="药名"
        :search-params="{ zylb: tcmType }"
        :auto-focus="focusKey === currentMedicine.key"
        @select="onSelectMedicine"
      />
      <a-input
        ref="inputRef"
        v-model:value="currentMedicine.sl"
        v-input-selection
        :bordered="false"
        class="w-40 input-style"
        placeholder="用量"
        suffix="g"
        @change="onItemChange"
        @keyup.enter="onKeyEnter"
      />
    </div>
    <div class="use-btn" :class="currentMedicine.jf ? 'show' : ''">
      <SelectTags
        v-model:value="currentMedicine.jf"
        bind-parent
        :bordered="false"
        type="煎法"
        class="text-xs cursor-pointer"
        tag-class="w-32"
        placeholder="煎法"
        @select="onSelectJf"
      />
    </div>
  </div>
</template>
<script setup>
import { ref, h, watch } from 'vue'
import { message } from 'ant-design-vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import SelectTable from '@/components/SelectTable'
import SelectTags from '@/components/SelectTags'

const porps = defineProps({
  medicineItem: {
    type: Object,
    default: () => ({})
  },
  medicineList: {
    type: Array,
    default: () => []
  },
  tcmType: {
    type: Number,
    default: 0
  },
  focusKey: {
    type: Number,
    default: -1
  },
  isLast: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['addItem', 'focusNext', 'deleteItem', 'changeItem'])
const inputRef = ref(null)
const currentMedicine = ref(porps.medicineItem)
watch(
  () => porps.medicineItem,
  (newVal) => {
    currentMedicine.value = newVal
  }
)

const onSelectMedicine = (selected) => {
  if (porps.medicineList.some((item) => item.bh === selected.bh)) {
    return message.error('【' + selected.mc + '】不可重复开立')
  }
  setTimeout(() => inputRef.value.focus(), 300)
  currentMedicine.value.mc = selected.mc
  currentMedicine.value.bh = selected.bh
  currentMedicine.value.shortName = selected.tcmJfDefaultName
  currentMedicine.value.jf = selected.tcmJfDefaultCode

  emit('changeItem')
  emit('addItem', currentMedicine.value.key)
}
const onDelete = (item) => {
  emit('deleteItem', item)
}
const onItemChange = () => {
  emit('changeItem')
}
const onSelectJf = (select) => {
  currentMedicine.value.shortName = select.shortName
  emit('changeItem')
}
const onKeyEnter = () => {
  const currentFocusKey = currentMedicine.value.key
  emit('focusNext', currentFocusKey + 1)
}
</script>
<style lang="less" scoped>
.item-style {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 80px;
  margin-bottom: -1px;
  padding-top: 18px;
  border-color: var(--border-color);
  border-style: dashed;
  border-right-width: 1px;
  border-bottom-width: 1px;

  &:hover,
  &.active {
    background-color: #00000007;
    outline: 1px dashed var(--primary-color);
    .use-btn,
    .delete-btn {
      display: block;
    }
  }
  .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    &:hover {
      border: 1px solid #ff4d4f;
      transform: scale(1.2);
      transition: all 0.2s ease-in-out;
    }
  }
  .use-btn {
    display: none;
  }
  .show {
    display: block !important;
  }
  // .delete-btn {
  //   top: 0;
  //   right: 0;
  // }
  .ant-input {
    cursor: pointer;
  }
}
:deep(.border-b-style) {
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  &:hover {
    border-bottom: 1px solid var(--primary-color);
  }
}
.input-style {
  padding: 0 12px;
  :deep(.ant-input) {
    padding-right: 4px;
    text-align: center !important;
    border-bottom: 1px solid var(--border-color) !important;
    cursor: pointer;
    &:hover {
      border-bottom-color: var(--primary-color) !important;
    }
  }
}
</style>
